<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>水面</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="mapContainer" style="position: relative;"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    window.app = new GE.App('mapContainer', {
        position: [119.5490034398738, 29.34511850151658, 300],
        lookAt: [119.54907987498354, 29.34999578514254775, 10],

        // position: [120.170646, 30.28362, 1000], //相机的位置
        // lookAt: [120.170646, 30.28362, 0], //相机看向的地图位置
        cameraScrollSpeed: 5, //鼠标滚动时，控制相机移动的速度
        minZoom: 3, //允许地图的最小层级
        maxZoom: 18, //允许地图的最大层级
        ambientLightIntensity: 5,
        useDefaultTexture: true, //是否使用瓦片默认纹理
        //水面对象会反射Fog，若想避免Fog对反射纹理的影像，背景应设置为Fog以外的类型
        background: "Sky", //背景的类型，参数有如下类型：None, Fog, Color, Gradient, Image, Sky, Image。使用Fog地图的性能会比较好
        baseLayer: [
            //影像底图
            {
                url: 'http://192.168.88.10:49999/t/HMapServer/rest/wmts/zjlx/{z}/{x}/{y}.png',
                urlDecimal: true,      // 请求参数zyx，是否为十进制，或十六进制      
                tileType: 'image',
                canNotSelect: false, // true表示该图层不参与射线拾取，false表示图层参与射线拾取
                maxDataLevel: 16,
                wmsUrlDecimal: true,

                // url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', //影像底图的url
                // // url: 'http://115.236.87.26:8848/googleTiles/china_image/{z}/{y}/{x}.jpg',
                // urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                // tileType: 'image', //影像底图
                // canNotSelect: false, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            }
        ]
    });

    addWater(); //添加水面

    function addWater() {
        let point1=new GE.Point(119.54825740388371, 29.34918419745391, 110, '4326').toEPSGWeb();
        let point2=new GE.Point(119.55657438502143, 29.348859015316837, 110, '4326').toEPSGWeb();
        let point3=new GE.Point(119.55500271482181, 29.34567577276462, 110, '4326').toEPSGWeb();
        let point4=new GE.Point(119.54967923720359, 29.34584131146607, 110, '4326').toEPSGWeb();
        let pointArray = [ //3857表示web墨卡托坐标系，4326表示经纬度坐标
        point1,
            point2,
            point3,
            point4
        ];
        let water = new GE.Water({
            points: pointArray,
            color: '#1E90FF', //水面颜色，fffff为透明色
            scale: 0.8, //水纹大小
            reflectivity: 0.2, //反射度【0-1】
            flowX: 1, //X方向水流比例（用于控制水的流动方向）【0-1】
            flowY: 1, //Y方向水流比例（用于控制水的流动方向）【0-1】
        });
        app.add(water);
    }



    app.on('Click', function (e) {
        console.log(e)
    });
</script>

</html>